<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>购物车示例</title>
    <style>
        [v-cloak] {
            display: none;
        }

        table {
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }

        th,
        td {
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }

        th {
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
        }
    </style>
</head>

<body>
<div id="app" cloak>
    <template v-if="carts.length">
        <table>
            <thead>
            <tr>
                <th>全选<input type="checkbox" v-model="selectedAll"></th>
                <th>店铺名称</th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="item in carts">
                <template v-for="(cart,index) in item.cartList">
                    <template v-if="index==0">
                        <tr>
                            <td :rowspan="item.cartList.length"><input type="checkbox" :click="checkOne"
                                                                       v-model="item.isSelected"></td>
                            <td :rowspan="item.cartList.length">{{item.shopName}}</td>
                            <td>{{cart.productName}}</td>
                            <td>{{cart.price}}</td>
                            <td><input type="number" v-model="cart.count"></td>
                            <td>
                                <button @click="handleRemove(index)">移除</button>
                            </td>
                        </tr>
                    </template>
                    <template v-else>
                        <tr>
                        <td>{{cart.productName}}</td>
                        <td>{{cart.price}}</td>
                        <td><input type="number" v-model="cart.count"></td>
                        <td>
                            <button @click="handleRemove(index)">移除</button>
                        </td>
                        </tr>
                    </template>
                </template>
            </template>
            </tbody>
        </table>
        <div>总价: ￥</div>
    </template>
    <div v-else>购物车为空</div>
</div>
<script src="../lib/vue-2.6.7.js"></script>
<script src="../lib/axios.min.js"></script>
<script >
    var app = new Vue({
        el: '#app',
        created(){
          this.getCarts();
        },
        data: {
            carts:{},
            selectedAll:false
        },
        computed: {

        },
        methods: {
            getCarts() {
                axios.get('../mock/carts.json').then(res => {
                    this.carts = res.data.orderData;
                }, err => {
                    console.log(err);
                })
            },
            checkOne() {

            }
        },
        filters:{
            toFixed(value) {
                if(!value) return '';
                if(typeof value=='number'){
                    return  Math.round(value*100)/100; //将小数保留两位有效数字
                }
            }
        }
    });
</script>
</body>

</html>